<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            /* 解决图片下方的间距的问题 */
            /* vertical-align: top; */
        }

        .img2 {
            margin-top: 50px;
        }

        /* img {
            float: left;
        } */

        .box {
            /* 空格的大小是跟字体大小有关系的 */
            font-size: 0;
        }

        div {
            background-color: #ff0;
        }

        .box2 {
            font-size: 0;
        }
    </style>
</head>

<body>

    <!-- 
        1 图片默认是沿底部对齐的

        2 图片与图片之间是有间距的   --- 左右的间距    本质上是由于代码换行所产生的
            所有的标签之间代码换行都会产生左右的空格

          解决方案
              1 不换行
              2 空注释
              3 图片都浮动  
              4 图片外面套一个盒子，写font-size:0;

        3 图片下方也有间距    ----  始终存在，跟换行无关
            解决方案
                1 img {vertical-align:top;}
                2 图片套一个盒子，写font-size:0;
                3 浮动也可以 
     -->

    <div class="box">
        <img src="../images/index-(3)_02_03.jpg" alt="">
        <img class="img2" src="../images/gotoway_05.jpg" alt="">
    </div>
    <div class="box2">
        <img src="../images/index-(3)_02_03.jpg" alt="">
    </div>
    <div>呵呵</div>

    <img src="../images/gotoway_05.jpg" alt=""><span>呵呵</span><span>呵呵</span>






</body>

</html>